<script setup>
import * as echarts from 'echarts';
import axios from "axios";
import {onMounted} from "vue";
let x = []

let chartDom;
let myChart;
let option;

for (let i = 150; i < 700; i++){
  x.push(i)
}
onMounted(() => {
  chartDom = document.getElementById('id');
  myChart = echarts.init(chartDom)
  axios.get('http://127.0.0.1:5000/abbreviated').then(res => {

      let data = res.data
      const entries = Object.entries(data);

      // 使用Map构造函数将键值对数组转换为Map对象
      const map = new Map(entries);


      option = {
        title: {
          text: '五年一分一段堆叠图',
          textStyle:{
            fontSize:15, //字体大小
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['2020','2021','2022','2023','2024'],
          top: '10%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: x
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '2020',
            type: 'line',
            stack: 'Total',
            data: map.get('20')
          },
          {
            name: '2021',
            type: 'line',
            stack: 'Total',
            data: map.get('21')
          },
          {
            name: '2022',
            type: 'line',
            stack: 'Total',
            data: map.get('22')
          },
          {
            name: '2023',
            type: 'line',
            stack: 'Total',
            data: map.get('23')
          },
          {
            name: '2024',
            type: 'line',
            stack: 'Total',
            data: map.get('24')
          }
        ]
      };

      option && myChart.setOption(option);

  })
})


</script>

<template>
  <div id="id"></div>
</template>

<style scoped>
#id{
  width: 100%;
  height: 100%;
}
</style>